<template>
  <div class="">
    <div class="titletopXX">
    <van-nav-bar
      size="30"
      :title="title"
      left-arrow
      right-text=""
      :fixed="true"
      @click-left="onClickLeft"
    />
  </div>
    <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
      <van-empty v-if="goodList.length == 0 && !error" image="search" description="未找到数据" />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
         :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="queryList"
        >
        <div class="ulbox">
          <div class="ul" v-for="(item, index) in goodList" :key="index">
            <div class="li">
              <div class="li_head">
                <div>
                  <van-image radius="5" width="100" height="80" fit="fill" :src="item.image" mode="" />
                </div>
                <div class="li_right">
                  <div>
                    <div class="TT">
                      {{ item.name }}
                    </div>
                    <div class="JJ">行程简介：{{ item.description }}</div>
                  </div>
                </div>
              </div>
              <van-divider :style="{ color: '#979797', padding: '0px', margin: '0px' }" />
              <div class="li_foot">
                <div class="li_foot_left">
                  <div style="display: flex; align-items: center">
                    <van-icon name="clock-o" color="#979797" size="16"></van-icon>
                    <div style="width: 5px"></div>
                    活动时间：{{ item.startTime }} 至 {{ item.endTime }}
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 13px;
                  "
                >
                  <div
                    class="li_right_btn"
                    style="border: 1px solid #36c2a8; background-color: #36c2a8; color: #ffffff"
                    @click="YYXX(item)"
                  >
                    编辑
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
    <div class="add">
      <van-icon @click="jumpToAdd" name="plus" color="#ffffff"  />
    </div>
  </div>
</template>

<script>
import { queryConvalesceActivityBackList } from "@/api/realAssets/icsharedstation/LYDJ/index.js"
import { getpersonalInformation } from "../../../../common/RYXX"

export default {
  data() {
    return {
      title: "疗养登记",
      path: JSON.parse(getpersonalInformation()).path,
      siteData: JSON.parse(localStorage.getItem("siteData")),
      nowTime: new Date().getTime(),
      goodList: [],
      pageData: {
        pageNumber: 1,
        pageSize: 10
      },
      loading: false,
      finished: false,
      refreshing: false,
      error: false
    }
  },
  methods: {
     queryList () {
  this.loading = true
  if (this.error) return // 如果当前是错误状态，不自动触发加载
  if (this.refreshing) {
    this.goodList = []
  }
  queryConvalesceActivityBackList({
    siteId: JSON.parse(localStorage.getItem("siteData")).id,
    pageNumber: this.pageData.pageNumber,
    pageSize: this.pageData.pageSize
  })
    .then((res) => {
      console.log(res)
      if (res.resultMessage != "SUCCESS") {
        this.goodList = []
        this.error = true // 显示错误提示
      } else if (res.data.length == 0) {
        this.goodList = []
        this.finished = true
      } else {
        let dataList = res.data
        this.goodList = [...this.goodList, ...dataList]
      }
      this.loading = false
      // 判断是否已加载完所有数据
      if (this.goodList.length == res.pageNum) {
        this.finished = true
      } else {
        this.pageData.pageNumber++
      }
      this.refreshing = false
    })
    .catch((err) => {
      console.log(err)
    })
},
 YYXX (item) {
  let li = encodeURIComponent(JSON.stringify(item))
  this.$router.push({
    path: "/HT/pages/LYDJ/add",
    query: {
      HDXQ: li
    }
  })
},
// 下拉刷新
 onRefresh() {
  this.pageData.pageNumber = 1
  this.pageData.pageSize = 10
  this.finished = false
  this.error = false
  this.loading = true
  this.refreshing = true
  this.queryList()
},
 retryLoad () {
  this.error = false
  this.loading = true
  this.queryList()
},
 jumpToAdd (){
  this.$router.push({
    path: "/HT/pages/LYDJ/add"
  })
},
onClickLeft() {
  this.$router.push({
    path: "/HT/pages/LYDJ/index",
  });
}
  },
  mounted () {
    this.queryList()
  }
}
</script>

<style scoped lang="less">
@import "../../../../static/css/index.less";
@import "../../../../pagesNew/QNY/qny.less";
.li_foot_left {
  color: #353535;
  font-size: 13px;
  display: flex;
}

.TT {
  font-size: 16px;
  line-height: 15px;
  font-weight: 500;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.JJ {
  display: -webkit-box;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 2px;
  height: 45px;
  width: 100%;
  margin: 5px 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #979797;
}
.li_right_btn {
  color: #808080;
  border-radius: 10px;
  border: 1px solid #808080;
  width: 60px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add{
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 50px;
  right: 20px;
  border-radius: 50%;
  background-color: rgb(2, 117, 113);
  display: flex;
  align-items: center;
  justify-content: center;
}
.titletopXX{
  height: 45px;
}
</style>
